<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>  
	<script type="text/javascript">
	
	window.onload = function () {
		var chart = new CanvasJS.Chart("chartContainer",
		{

			title:{
				text: "Monthly Sell",
				fontSize: 30
			},
                        animationEnabled: true,
			axisX:{

				gridColor: "Silver",
				tickColor: "silver",
				valueFormatString: "DD/MMM"

			},                        
                        toolTip:{
                          shared:true
                        },
			theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
			},
			legend:{
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: data,
          legend:{
            cursor:"pointer",
            itemclick:function(e){
              if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
              	e.dataSeries.visible = false;
              }
              else{
                e.dataSeries.visible = true;
              }
              chart.render();
            }
          }
		});

chart.render();
}
	
	
	   var limit = 0;    //increase number of dataPoints by increasing this
	  // limit = <s:property value="count" />;

	   var y = 0;
	   var data = []; var dataSeries = { type: "line" };
	   var dataPoints = [];
	   var yy=[0,0,0,0,0,0,0,0,0,0,0,0,0];
	   var yyCount = 0;
	   <s:iterator value="invoice_items">
	   	yy[yyCount] = <s:property value="getPrice()"/>;
	   	yyCount = yyCount + 1;
	   </s:iterator>
	   
	   var aa=[0,0,0,0,0,0,0,0,0,0,0,0,0];
	   var bb=[0,0,0,0,0,0,0,0,0,0,0,0,0];
	   var cc=[0,0,0,0,0,0,0,0,0,0,0,0,0];
	   var dd=[0,0,0,0,0,0,0,0,0,0,0,0,0];
	   var aaCount = 0;
	   <s:iterator value="invoice">
	   	aa[aaCount] = <s:property value="getDate().getYear()"/>;
	   	aa[aaCount] = aa[aaCount] + 1900;
	   	bb[aaCount] = <s:property value="getDate().getMonth()"/>;
	   	bb[aaCount] +=1;
	   	cc[aaCount] = <s:property value="getDate().getDay()"/>;	   	
	   	cc[aaCount] -= 26;
	   	aaCount = aaCount + 1;
	   </s:iterator>
	   
	   
   		limit = yyCount;
	   for (var i = 0; i < limit; i += 1) {
	    dataPoints.push({
	      x: new Date(aa[i],bb[i],cc[i]),
	      y: yy[i]                
	    });
	  }

	   
	  dataSeries.dataPoints = dataPoints;
	  data.push(dataSeries);    
</script>
<script type="text/javascript" src="javascript/canvasjs.min.js"></script>
</head>
<body>
	<div id="chartContainer" style="height: 300px; width: 100%;">
	</div>


</body>
</html>